<template>
  <div class="genral-goods">
    <div class="card-wrapper">
      <div v-for="(item, index) in goodsListAll" :key="index" @click.capture="mp(index,$event)">
        <div class="select-sh">
          <van-icon name="check"  @click.stop="shSelected(index)" v-show="!item.selectSh" />
          <van-icon name="checked"  @click.stop="shSelected(index)" v-show="item.selectSh" />
          <span class="sh-name">{{item.merchantName}}</span>
        </div>
        <div class="card">
          <van-cell-swipe :right-width="70" :on-close="onClose" v-for="(goods, index) in item.shoppingCartList" :key="index">
            <!-- <span slot="left">选择</span> -->
            <!-- <van-cell-group> -->
            <div class="check" @click="spSelected(index)">
              <van-icon name="check" v-show="!goods.selectSp" />
              <van-icon name="checked" v-show="goods.selectSp" />
            </div>
            <van-card :title="goods.productDetail.productName" desc="" :num="goods.num" :price="goods.productDetail.price" :thumb="goods.productDetail.images[0]">
              <div slot="footer">
                <van-stepper :disable-input="true" @input="nowPrice" @plus="add(index, 20)" @minus="reduce(index, 1)" v-model="goods.num" integer :min="2" :max="20" :step="1" :default-value="2" />
              </div>
            </van-card>
            <!-- </van-cell-group> -->
            <span class="del" slot="right">删除</span>
          </van-cell-swipe>
        </div>
      </div>
    </div>
    <div class="footers">
      <div class="footers__check">
        <div class="check" @click="checkedAll">
          <van-icon name="check" v-show="!allSelect" />
          <van-icon name="checked" v-show="allSelect" />
          <span class="footers__check__title">全选</span>
        </div>
      </div>
      <div class="footers__total-price">
        <span>合计：</span>
        <span>{{allPrice}}</span>
        <span>元</span>
      </div>
      <div class="footers__submit">确认提交</div>
    </div>
  </div>
</template>

<script>
// import Vue from 'vue'
// import { CellSwipe, Dialog, CellGroup, Cell, Card, Stepper, Icon, SubmitBar, Checkbox } from 'vant'
import goods from '../../../mock/goodsList'
import { Toast, Dialog } from 'vant'
// Vue.use(CellSwipe).use(Dialog).use(CellGroup).use(Cell).use(Card).use(Stepper).use(Icon).use(SubmitBar).use(Checkbox)
export default {
  data() {
    return {
      goodsList: goods.result,
      num: -1,
      Index: '',
      spIndex: '',
      allPrice: '0.00',
      allSelect: false,
      allNum: 0,
      numid: []
    }
  },
  mounted() {
    // console.log(this.goodsListAll)
    console.log(1)
  },
  computed: {
    goodsListAll() {
      this.goodsList.forEach(item => {
        this.$set(item, 'selectSh', false)
        item.shoppingCartList.forEach(itemSp => {
          this.$set(itemSp, 'selectSp', false)
        })
      })
      return this.goodsList
    }
  },
  methods: {
    nowPrice() {
      this._price()
    },
    limit() {
      Toast('我是提示文案，建议不超过十五字~')
    },
    mp(shIndex) {
      this.Index = shIndex
      console.log('1---选择的是店铺------' + this.Index)//    console.log(e.currentTarget);
    },
    onClose(clickPosition, instance) {
      switch (clickPosition) {
        case 'cell':
        case 'outside':
          instance.close()
          break
        case 'right':
          Dialog.confirm({
            message: '确定删除吗？'
          }).then(() => {
            console.log(111)
            instance.close()
          })
          break
      }
    },
    // 获取商品id
    spSelected(spIndex) {
      this.goodsListAll[this.Index].shoppingCartList[spIndex].selectSp = !this.goodsListAll[this.Index].shoppingCartList[spIndex].selectSp
      var select = this.goodsListAll[this.Index].shoppingCartList[spIndex].selectSp
      this.spIndex = spIndex
      var length = this.goodsListAll[this.Index].shoppingCartList.length
      // 商品全部选中，店铺才选中
      for (var i = 0; i < length; i++) { // 叠加积累有false就为false
        select *= this.goodsListAll[this.Index].shoppingCartList[i].selectSp
      }
      if (select === 1) {
        this.goodsListAll[this.Index].selectSh = true
      } else this.goodsListAll[this.Index].selectSh = false
      // 判断商品是否全部选中，是的话，全选也选中
      var goodsListAllLength = this.goodsListAll.length
      var all = true
      for (var j = 0; j < goodsListAllLength; j++) {
        all *= this.goodsListAll[j].selectSh
      }
      if (all === 1) {
        this.allSelect = true
      } else {
        this.allSelect = false
      }
      console.log(this.allSelect)
      // console.log("2---店铺----"+this.Index+"商品序列---"+spIndex);
      // console.log(e.currentTarget);
      // this.allSl()// 商品数量
      // this.cancel()// 商品没有全部选中就取消全选
      this._price()// 总价
    },
    // 选择属于某个商家地所有产品
    shSelected(index) {
      // 商家选中
      this.goodsListAll[index].selectSh = !this.goodsListAll[index].selectSh
      var select = this.goodsListAll[index].selectSh
      var arr = this.goodsListAll[index].shoppingCartList// 获取店铺下面的产品数量
      for (var i = 0; i < arr.length; i++) { // 循环产品数量
        if (arr[i].selectSp === false) { // 判断有那些产品未选中
          arr[i].selectSp = true // 选中咯
        }
        if (this.goodsListAll[index].selectSh === false) { // 当店铺取消全选的时候
          arr[i].selectSp = false // 产品全部没选中
        }
      }
      // var select = true// 创建一个为真的变量
      for (var j = 0; j < this.goodsListAll.length; j++) {
        if (this.goodsListAll[j].selectSh === false) { // 如果有商家没选中全选则为false
          this.allSelect = false
        }
        select *= this.goodsListAll[j].selectSh
      }
      if (select === 1) {
        this.allSelect = true
      }
      console.log(this.allSelect)
      // this.allSl()// 商品数量
      this._price()
      // console.log(arr.length);
    },
    // 计算价格
    _price() {
      var all = 0
      var numidObjs = {}
      var numidArr = []
      for (var j = 0; j < this.goodsListAll.length; j++) { // 点击循环有多少个商家
        var arr = this.goodsListAll[j].shoppingCartList// 获取商家下面的列表产品
        for (var i = 0; i < arr.length; i++) { // 循环产品列表
          if (arr[i].selectSp === true) { // 列表里面那些为true
            numidObjs = { 'num': Number(arr[i].num), 'id': arr[i].productId }
            numidArr.push(numidObjs)
            all += arr[i].productDetail.price * arr[i].num// 为true的价格加起来，为总价
          }
        }
      }
      console.log(numidArr)
      this.allPrice = Number(all).toFixed(2)
    },
    // 商品--
    reduce(index, min) {
      if (min === 2) {
        this.limit()
      }
      this._price()
    },
    // 商品++
    add(index) {
      this._price()
    },
    checkedAll() {
      this.allSelect = !this.allSelect
      var dp = this.goodsListAll.length// 获取店铺数量
      for (var i = 0; i < dp; i++) { // 循环店铺
        var arr = this.goodsListAll[i].shoppingCartList// 获取每个店铺的商品
        for (var j = 0; j < arr.length; j++) { // 循环每个店铺里面的商品为选中
          if (this.allSelect === true) {
            // var select = this.json[i].items[j].select
            this.goodsListAll[i].shoppingCartList[j].selectSp = true
          }
          if (this.allSelect === false) {
            this.goodsListAll[i].shoppingCartList[j].selectSp = false
          }
        }
        if (this.allSelect === true) {
          this.goodsListAll[i].selectSh = true
        } else {
          this.goodsListAll[i].selectSh = false
        }
      }
      // this.allSl()// 商品数量
      this._price()
    }
  }
}
</script>

<style lang="scss">
.genral-goods {
  .van-cell-swipe__right {
    .del {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
  }
  .van-icon-checked {
    color: #269654;
    vertical-align: middle;
  }
  .van-icon-check {
    color: #ccc;
    vertical-align: middle;
  }

  .select-sh {
    box-sizing: border-box;
    // background-color: #ccc;
    padding-left: 10px;
    height: 40px;
    line-height: 40px;
    font-size: 22Px;
    .sh-name {
      font-size: 16Px;
    }
     .van-icon{
      position: static;
    }
  }
  .card-wrapper {
    position: relative;
    margin-bottom: 50px;
    .check {
      position: absolute;
      top: 40%;
      left: 10px;
      z-index: 2;
      font-size: 20px;
    }
  }
  .footers {
    padding-left: 10px;
    display: flex;
    width: 100%;
    height: 50px;
    line-height: 50px; // padding-top: 50px;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 2;
    background-color: #ccc;
    font-size: 18Px;
    &__check {
      flex: 1; // background-color: hotpink;
      font-size: 22Px;
      &__title {
        font-size: 18Px;
      }
    }
    &__total-price {
      flex: 2; // background-color: blue;
      text-align: center;
    }
    &__submit {
      flex: 1; // height: 50px;
      text-align: center;
      background-color: red;
    }
  }
  .card {
    .van-stepper__input {
      padding: 0;
      border: none;
      font-size: 16Px;
    }
    .van-stepper__input[disabled]{
      color: #666;
      background-color: #fff;
    }
    .van-stepper__minus,
    .van-stepper__plus {
      border-radius: 0.8rem;
      width: 0.8rem;
      height: 0.8rem;
    }
    .van-cell-swipe__right {
      width: 72px;
      background-color: #f44;
      color: #fff;
      font-size: 16px;
    }
    .van-card {
      background: #fff;
    }
    .van-card__thumb {
      left: 44px; // background-color: #ccc;
    }
    .van-card__content {
      margin-left: 22px;
    }
    .van-card:not(:first-child) {
      margin-top: 0;
    }
    .van-cell-swipe {
      margin-bottom: 10px;
      border-bottom: 1px solid #f2f2f2;
      &:last-child {
        margin-bottom: 0;
      }
    }
  }
}
</style>
